import React, { Component,lazy,Suspense} from 'react'
import {Route,NavLink} from 'react-router-dom'
// import About from './About';
// import Home from './Home';
// 同时，需要注意对于Loading组件不要使用懒加载导入，否则就陷入endless cycle了
import Loading from './Loading'
const About = lazy(()=>import('./About'))
const Home = lazy(()=>import('./Home'))
// 使用lazy函数需要调整组件的导入方式



/**
 * 实际上当页面导航栏的对应着多个组件时，即使用户只需要使用其中的1个或者几个
 * 但页面在加载的时候还是会将所有组件都加载出来，这其实是不太合理的。组件的懒加载就
 * 可以帮助我们解决这个问题.同时，懒加载需要配合Suspense 一起使用
 * 这样做的原因很简单：一次性把组件加载出来，虽然一开始全部加载的时候速度会比较慢，但后面打开的速度就会很快
 * 而懒加载的话，由于还要再发一次网络请求，所以react会要求我们在等待结果返回的过程中，定义一个类似于Loading提示的组件
 * 以此来提高用户体验（否则用户看到的将是白屏）
 */
export default class Demo extends Component {
    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 在React中靠路由链接实现切换组件--编写路由链接 */}
                            <NavLink className="list-group-item" to="/about">About</NavLink>
                            <NavLink className="list-group-item" to="/home">Home</NavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 注册路由 */}
                                <Suspense fallback={<Loading/>}>
                                <Route path="/about" component={About} />
                                <Route path="/home" component={Home} />
                                </Suspense>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
